import React, { Component } from "react";

import { NavLink } from "react-router-dom";

export default class Details extends React.Component {
  componentDidMount() {
    this.props.getOne(this.props.match.params.id);
  }
  render() {
    const { data, addToCart ,boo} = this.props;
if(boo){

  return (
    <div style={{ width: "1200px", margin: "0 auto" }}>
      <Child {...data} event={addToCart} />
    </div>
  );
}else{
  return(
    <div>
      <NavLink to="/login">请先登录！</NavLink>

        
    </div>

  )
}
  }
}
const Child = data => {
  var h3Style  = { fontSize: "28px" };
  var imgStyle = { width: "400px", float: "left" };
  var divStyle = { float: "left", marginLeft: "30px" };
  var pStyle   = {
    width     : "300px",
    height    : "60px",
    lineHeight: "20px",
    overflow  : "hidden"
  };
  var buttonStyle = {
    display        : "inline-block",
    width          : "100px",
    height         : "30px",
    backgroundColor: "black",
    color          : "white",
    lineHeight     : "24px",
    textAlign      : "center",
    cursor         : "pointer",
    outline        : 'none'

  };

  return (
    <div style={{ overflow: "hidden", marginTop: "40px" }}>
      <img src={data.img} style={imgStyle} />
      <div style={divStyle}>
        <h3 style={h3Style}>{data.title}</h3>
        <p>简介：</p>
        <p style={pStyle}>{data.text}</p>
        <p>单价：￥{data.price}</p>
        <button style={buttonStyle} onClick={() => data.event(data)}>
          加入购物车
        </button>{" "}
        <NavLink to="/cart">结算</NavLink>
      </div>
    </div>
  );
};
